<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>手机验证码验证页面</title>
		<link rel="stylesheet" type="text/css" href="static/css/register.css"/>
		<link rel="stylesheet" href="static/css/jigsaw.css">
		<script src="static/js/jigsaw.js"></script>
		<script type="text/javascript" src="static/js/jquery-1.12.4.js"></script>
		<style type="text/css">
		.code{
				float:left;
		}
		#getValidate{
			margin-left: 15px;
			width:200px;
			height:42px;
			background-color: #2AAD6F;
			border: 0px;	
			cursor: pointer;  
			color:white;
			font-size: medium;
			text-align: center;
		}
		#getValidate:hover{
			background-color: #47B488;
			
		}
		</style>
	</head>
	
	<body>
		<div class= "container">
		
			<div class ="guidecolumn">
				<ul>
					<li class = ""><a href="index.jsp">OPPO官网</a></li>
					<li class = ""><a href="#">OPPO社区</a></li>
					<li class = ""><a href="#">ColorOS</a></li>
				</ul>
			</div>
			
			<div class="main">
				<!--大框-->
				<div class="box" style="height: 450px">
					<div class="text1">注册OPPO账号</div>
					<form method="post" action="RegistControl">
						<div class="login">
							<!--获取手机验证码--->
							<div style="height: 50px; margin-top: 10px">
								<input id="IndentiCode" name="IndentiCode" type="code" required style="height: 40px; width: 100px; margin-left: 30px;"
									placeholder="请输入验证码" /> <input id="getValidate"name="getValidate" readonly="readonly" value="获取验证码" />
							</div>
							<!--验证码不能为空-->
							<div id="Validatetip" style="margin-left: 33px; font-size: x-small; color: red; display: none;">
								验证码不能为空</div>
							<!-- 验证码错误 -->
							<div id="Validatefstip" style="margin-left: 33px; font-size: x-small; color: red; display: none;">
								验证码错误</div>
							<!--注册-->
							<div class="row1">
								<input id="regist_button" class="row1_2" type="submit"
									value=" 下一步" style="margin-top: 30px;" />
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
		<script type="text/javascript">
		    var InterValObj; //timer变量，控制时间
		    var count = 60; //间隔函数，1秒执行
		    var curCount;//当前剩余秒数
		    function sendMessage(){
		    	curCount = count;
		        $("#getValidate").attr("disabled", "true");
		        $("#getValidate").val(curCount + "秒后可重新发送");
		        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次请求后台发送验证码 TODO
		    }
		    //timer处理函数
		    function SetRemainTime() {
		        if (curCount == 0) {
		            window.clearInterval(InterValObj);//停止计时器
		            $("#getValidate").removeAttr("disabled");//启用按钮
		            $("#getValidate").val("重新发送验证码");
		        }
		        else {
		            curCount--;
		            $("#getValidate").val(curCount + "秒后可重新发送");
		        }
		    }
		</script>
		<script type="text/javascript">

		   $("#IndentiCode" ).focus(function(){
		   	  	$("#Validatetip").css("display","none");
		   		$("#Validatefstip").css("display","none");
		   });
		   
		   var sms="";
		    $("#getValidate").click(function(){
		    	var phone =<%=request.getParameter("user_id")%>;
		    	
		    	sendMessage();
		        $.ajax({
		            url:"sendSMS",
		            type:"post",
		            data:{"phone":phone},
		            success:function(result){
		                sms=result;
		            }
		        });
		    });
		    $("#regist_button").click(function(){
		        var code=$("#IndentiCode").val();
		            if(code == ""){
		            	$("#Validatetip").css("display","block");
		            	return false;
		            }else if(sms!=code){
		            	$("#Validatefstip").css("display","block");
		            	return false;
		            }
		        });
  		</script>
	</body>
</html>
